<style>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>

<template>
<Row :loading="spinShow">
  <Row class="toolBar" justify="start">
    <Col span="8">
      <Button-group shape="circle">
        <Tooltip v-if="add" content="添加" placement="bottom-start">
          <Button
              type="default" size="small"
              @click="addClick()">
              添加
            </Button>
        </Tooltip>
        <Tooltip v-if="editCheck" content="编辑所选" placement="bottom-start" transfer>
          <Button
              type="default"
              @click="editCheckClick()"
            >
              编辑所选
            </Button>
        </Tooltip>
        <Tooltip v-if="delCheck" content="删除所选" placement="bottom-start">
          <Button
              type="default"
              @click="delCheckClick()"
            >
              删除所选
            </Button>
        </Tooltip>
        <Tooltip v-if="assign" content="分配资源" placement="bottom-start">
          <Button
              type="default"
              @click="assignClick()"
            >
              分配资源
            </Button>
        </Tooltip>
        <Tooltip v-if="reset" content="重置密码" placement="bottom-start">
          <Button
              type="default"
              @click="resetClick()"
            >
              重置密码
            </Button>
        </Tooltip>
      </Button-group>
    </Col>
    <Col span="16">
      <Tooltip content="查询" placement="bottom-start" style="float: right;">
        <Button
            type="default"
            @click="search"
          >
            查询
          </Button>
      </Tooltip>
      <Input
          ref="searchtxt"
          v-model="searchKey"
          icon="ios-search-strong"
          placeholder="请输入..."
          style="width:200px;float:right;"
          @on-enter="search"
        >
      </Input>

      <Button-group style="float: right;">
        <Tooltip content="刷新" placement="bottom-start">
          <Button
              type="default"
              @click="refresh"
            >
              刷新
            </Button>
        </Tooltip>
        <Tooltip content="导出全部数据" placement="bottom-start">
          <Button
              type="default"
              @click="exportData(1)"
            >
              导出全部数据
            </Button>
        </Tooltip>
        <Tooltip content="导出当前页数据" placement="bottom-start">
          <Button
              type="default"
              @click="exportData(2)">
              导出当前页数据
            </Button>
        </Tooltip>
      </Button-group>
    </Col>
  </Row>
  <Table ref="table" :context="self" border stripe :columns="columns" :data="curTableData" :loading="loading" @on-selection-change="selectRow" @on-sort-change="sortOrder" @on-row-dblclick="show" />
  <div style="margin: 10px;overflow: hidden">
    <div style="float: right;">
      <Page :total="totals" :current="current" :page-size="pageSize" :page-size-opts="pageSizeOpts" show-elevator show-total show-sizer @on-change="changePage" @on-page-size-change="changeSize" />
    </div>
  </div>
  <Modal v-show="dataShow" v-model="showData" title="查看数据详细信息" class="editm">
    <Form ref="showForm" :model="showItem" :label-width="80">
      <Form-item v-for="(val, key) in showItem" :key="key" :label="key">
        <Input
            :value="val"
            disabled
            :icon="key==='Logo'? val:''"></Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>

<script>
import api from '@/api';
import {
  inputString
} from '@/common/utils';
export default {
  props: {
    loading: false,
    dataAll: {
      type: Array,
      default () {
        return [];
      }
    },
    editCheck: {
      type: Boolean,
      default: false
    },
    totals: {
      type: Number
    },
    columns: {
      type: Array,
      default () {
        return [];
      }
    },
    dataShow: {
      type: Boolean,
      default () {
        return false;
      }
    },
    add: {
      type: Boolean,
      default () {
        return false;
      }
    },
    delCheck: {
      type: Boolean,
      default () {
        return false;
      }
    },
    assign: {
      type: Boolean,
      default () {
        return false;
      }
    },
    reset: {
      type: Boolean,
      default () {
        return false;
      }
    },
    check: {
      type: Boolean,
      default () {
        return false;
      }
    },
    op: {
      type: Boolean,
      default () {
        return false;
      }
    }
  },
  data () {
    return {
      self: this,
      current: 1,
      pageSize: 10,
      total: this.totals,
      searchKey: '',
      sortby: [],
      order: [],
      spinShow: false,
      showData: false,
      showItem: {},
      pageSizeOpts: [10, 20, 50, 100],
      selectRows: [] // 选择的数据
    };
  },
  computed: {
    //        过滤数据表
    //      当前表数据
    curTableData () {
      // console.log(this.columns)
      if (!this.dataAll) {
        return [];
      }
      return this.dataAll;
    },
    pagedata () {
      return {
        pagesize: this.pageSize,
        page: this.current,
        searchKey: this.searchKey,
        sortby: this.sortby,
        order: this.order
      };
    }
  },
  mounted () {
    // 修改删除操作按钮
    if (this.op) {
      let op = {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h(
              'Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.index);
                  }
                }
              },
              '修改'
            ),
            h(
              'Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.index);
                  }
                }
              },
              '删除'
            )
          ]);
        }
      };
      this.columns.push(op);
    }

    // 多选框
    if (this.check) {
      let ck = {
        type: 'selection',
        width: 60,
        align: 'center'
      };
      this.columns.unshift(ck);
    }
    //      this.getall()
  },
  // watch: {},
  methods: {
    //        刷新数据
    refresh () {
      this.searchKey = '';
      this.$emit('refresh');
    },
    //        选择数据
    selectRow (selection) {
      this.selectRows = selection;
    },
    //      改变页码大小
    changeSize (current) {
      this.pageSize = current;

      this.$emit('changePage', this.pagedata);
    },
    //      改变页码
    changePage (current) {
      this.current = current;

      this.$emit('changePage', this.pagedata);
    },
    // 查询
    search () {
      this.$emit('search', this.pagedata);
    },
    // 排序
    sortOrder (data) {
      console.log(data);
      console.log(this.pagedata);
      // if (this.pagedata.sortby.indexOf(data.key) > -1) {
      this.pagedata.sortby = [data.key];
      this.pagedata.order = [data.order];
      console.log(this.pagedata);
      this.$emit('sortOrder', this.pagedata);
      // }
    },
    //      导出数据1为原始数据，2为当前数据
    exportData (type) {
      if (type === 1) {
        let all = {
          pagesize: -1,
          page: 1,
          searchKey: '',
          sortby: this.sortby,
          order: this.order
        };
        this.$emit('search', all);
        setTimeout(() => {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            quoted: true
            //            columns: this.columns.filter((col, index) => index < 5),
            //            data: this.dataAll,
          });
          this.search();
        }, 1500);
      } else if (type === 2) {
        this.$refs.table.exportCsv({
          filename: '排序和过滤后的数据',
          original: false,
          quoted: true
        });
      }
    },
    //      显示详细记录
    show (row) {
      this.showItem = row;
      this.showData = true;
    },
    //      编辑表格数据
    edit (index) {
      console.log(index);
      console.log(this.dataAll);
      this.$emit('edit', this.dataAll[index]);
    },
    //      新增
    addClick () {
      this.$emit('add');
    },
    //      授权
    assignClick () {
      let list = [];
      for (let i = 0; i < this.selectRows.length; i++) {
        list.push(this.selectRows[i].Id);
      }
      this.$emit('assign', list);
    },
    //      重置
    resetClick () {
      let list = [];
      for (let i = 0; i < this.selectRows.length; i++) {
        list.push(this.selectRows[i].Id);
      }
      this.$emit('reset', list);
    },
    editCheckClick () {
      if (!this.selectRows || this.selectRows.length !== 1) {
        this.$Message.error('编辑数据必须选择一个数据！', 4);
      } else {
        this.$emit('edit', this.selectRows[0]);
      }
    },
    //      删除所选确认
    delCheckClick () {
      if (!this.selectRows || this.selectRows.length < 1) {
        this.$Message.warning('必须选择一个需要删除的项目！');
      } else {
        this.$Modal.confirm({
          title: '删除确认',
          content: '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
            '<p>是否继续删除？</p>',
          onOk: () => {
            this.delList(this.selectRows);
          },
          onCancel: () => {}
        });
      }
    },
    //      删除所选
    delList (rows) {
      let list = [];
      for (let i = 0; i < rows.length; i++) {
        list.push(rows[i].Id);
      }
      this.$emit('delCheck', list);
    },
    //      删除确认
    remove (index) {
      this.$Modal.confirm({
        title: '删除确认',
        content: '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
          '<p>是否继续删除？</p>',
        onOk: () => {
          this.del(index);
        },
        onCancel: () => {}
      });
    },
    //      删除
    del (id) {
      this.$emit('del', this.curTableData[id]);
    }
  }
};
</script>
